<template>
	<view class="dateRange">
		<view class="box">
			<view class="di" @tap="show1=true">
				<view class="input">
					<text v-if="startDate">{{formatter(startDate)}}</text>
					<text v-else class="placeholder">{{startPlaceholder}}</text>
				</view>
				<view class="ico">
					<image src="@/static/images/icon-date.svg" mode="aspectFit"></image>
				</view>
			</view>
			<view class="gap"></view>
			<view class="di" @tap="show2=true">
				<view class="input">
					<text v-if="endDate">{{formatter(endDate)}}</text>
					<text v-else class="placeholder">{{endPlaceholder}}</text>
				</view>
				<view class="ico">
					<image src="@/static/images/icon-date.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<u-datetime-picker :value="defaultDate" :show="show1" :maxDate="endDate?endDate:maxDate" :closeOnClickOverlay="true" @cancel="show1=false" @confirm="setStartDate" :mode="mode"></u-datetime-picker>
		<u-datetime-picker :value="defaultDate" :show="show2" :minDate="startDate?startDate:minDate" :closeOnClickOverlay="true" @cancel="show2=false" @confirm="setEndDate" :mode="mode"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props:{
			formate:{
				type:String,
				default:'YYYY/MM/DD'
			},
			startPlaceholder:{
				type:String,
				default:'开始时间'
			},
			endPlaceholder:{
				type:String,
				default:'结束时间'
			},
			maxDate:{
				type:Number,
				default:()=>{return new Date().getTime()+315576000000}
			},
			minDate:{
				type:Number,
				default:()=>{return new Date().getTime()-315576000000}
			},
			mode:{
				type:String,
				default:'date'
			}
		},
		data() {
			return {
				defaultDate:new Date().getTime(),
				show1:false,
				show2:false,
				startDate:'',
				endDate:''
			};
		},
		methods:{
			formatter(s) {
				var that=this;
				var year=new Date(s).getFullYear();
				var month=new Date(s).getMonth()+1;
				var date=new Date(s).getDate();
				var hh=new Date(s).getHours();
				var mm=new Date(s).getMinutes();
				var ss=new Date(s).getSeconds();
				return that.formate
				.replace(/YYYY/g, year)
				.replace(/MM/g, (month>9?month:'0'+month))
				.replace(/DD/g, date>9?date:'0'+date)
				.replace(/hh/g, hh>9?hh:'0'+hh)
				.replace(/mm/g, mm>9?mm:'0'+mm)
				.replace(/ss/g, ss>9?ss:'0'+ss);
			},
			setStartDate(val){
				this.startDate=val.value;
				this.show1=false;
				if(this.endDate){
					this.$emit('change',{start:this.formatter(this.startDate),end:this.formatter(this.endDate)})
				};
			},
			setEndDate(val){
				this.endDate=val.value;
				this.show2=false;
				if(this.startDate){
					this.$emit('change',{start:this.formatter(this.startDate),end:this.formatter(this.endDate)})
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dateRange{
		display: inline-block;
		.box{
			display: flex;
			align-content: center;
			padding: 0 26rpx;
			border-radius: 80rpx;
			background: #fff;
			.di{
				flex: 1 0 auto;
				display: flex;
				align-items: center;
				.input{
					flex: 1 0 auto;
					font-size: 24rpx;
					line-height: 80rpx;
					color: #65554d;
					min-width: 140rpx;
					.placeholder{
						color: #999;
					}
				}
				.ico{
					flex: 0 0 auto;
					margin-left: 10rpx;
					image{
						display: block;
						width: 22rpx;
						height: 25rpx;
					}
				}
			}
			.gap{
				margin: auto 20rpx;
				flex: 0 0 auto;
				width: 15rpx;
				height: 2rpx;
				background: #72635c;
			}
		}
	}
</style>